import React, { useEffect, useState } from 'react'
import Menu from '@/views/Menu'
import '@/assets/css/index.scoped.css'
import BackToTop from '@/components/BackToTop/BackToTop'
import { useScroll } from '@react-hooks-library/core'

const Component = () =>
{
    useEffect(()=>{
        onRefresh()
        getCouponList()
        
    },[])
    const [couponList,setCouponList] = useState([])
    const getCouponList = async()=>{
        let result = await React.request.get('/coupon/showCoupon')
        setCouponList(result)
    }
    const [roomList, setRoomList] = useState<Array>([])
    const [hasMore, setHasMore] = useState<Boolean>(true)
    const [keywords, setKeywords] = useState<String>('')
    const [page, setPage] = useState(1)
    const [pageSize, setPageSize] = useState(6)
    const onRefresh = ()=>{
        setPage(val=>1)
        setRoomList([])
        setHasMore(true)
    }
    const loadMore = async()=>{
        let result = await React.request.get('/',{params:{keywords,page,pageSize}})
        setPage(page+1)
        setRoomList(val => [...val, ...result.data])
        setHasMore(result.has_more)
    }
    const handleSearch = (event)=>{
        event.preventDefault();
        onRefresh()
        return false
    }
      // 控制回到顶部组件显示的状态
    const [backVisible, setBackVisible] = useState(false)
    // ref绑定在我们要监听的滚动区域Dom元素上
    const backRef = useRef<HTMLDivElement|null>(null)
    useScroll(backRef, ({ scrollX, scrollY }) => {
        if (scrollY > 0.4) {
            setBackVisible(true)
        } else {
            setBackVisible(false)
        }
    })

    return (
    <>
        <React.UI.PullToRefresh
        onRefresh={onRefresh}
        >
        <div style={{ height: '50em' ,overflow:'scroll'}} ref={backRef}>
        <React.UI.Swiper loop>
            {couponList.map((item,index)=>(
                <React.UI.Swiper.Item onClick={() => React.navigate(`/coupon/info?id=${item.id}`)} key={index}>
                    <React.UI.Image src={item.thumb} width={'100%'} height={'200px'} fit='cover' />
                </React.UI.Swiper.Item>
            ))}
        </React.UI.Swiper>
        <form className="hotel_search" onSubmit={handleSearch}>
            <input type="text" placeholder="请输入关键词搜索" value={keywords} onChange={e=>setKeywords(e.target.value)}/>
        </form>
        <React.UI.List className="hotellist">
            {roomList.map((item, index) => (
            <React.UI.List.Item key={index}  className="item">
                <Link to={`/room/info?id=${item.id}`}>
                    <div className="images">
                        <div className="swipers">
                            <img src={item.thumb} />
                        </div>
                        <div className="title">{item.name}</div>
                    </div>
                    <React.UI.Space>
                        {item.flag.split(',').map((f, index) => (
                            <React.UI.Tag color='default' key={index}>{f}</React.UI.Tag>
                        ))}
                    </React.UI.Space>
                    <div className="item_bot">
                        <div className="font">
                            <span className="price">￥{item.price}</span>
                        </div>
                        <div className="btn">立即下单</div>
                    </div>
                </Link>
            </React.UI.List.Item>
            ))}
            <BackToTop
                visible={backVisible}
                back={() => {
                backRef.current?.scrollTo({ behavior: 'smooth', top: 0, left: 0 })
                }}
            />
        </React.UI.List>
        <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </div>
        </React.UI.PullToRefresh>
        <Menu />
    </>
    )
}

export default Component